<template>
  <view :data-theme="theme() || ''" :class="theme() || 'container'">
    <view class="order-box" style="padding: 40rpx; background-color: #ffffff; border-radius: 20rpx; box-shadow: 0 4rpx 16rpx rgba(0,0,0,0.1); margin: 30rpx;">
      <text class="f28 fb mb40" style="color: #333;">当前余额: {{ balance }}</text>
      <input v-model="withdrawAmount" placeholder="请输入提现金额" style="margin: 30rpx 0; padding: 20rpx; border: 1px solid #f5f5f5; border-radius: 10rpx; background-color: #f9f9f9; font-size: 28rpx;" />
      <button @click="withdraw" style="padding: 10rpx 20rpx; border-radius: 42rpx; width: 100%; height: 84rpx; display: flex; justify-content: center; align-items: center; font-size: 32rpx; font-weight: 800; margin-top: 60rpx; box-sizing: border-box; background: linear-gradient(to right, #04be01, #07c160); color: white;">提现</button>
    </view>
  </view>
</template>

<script>
import utils from '@/common/utils.js';
  export default {
    data() {
      return {
        balance: 1000,
        withdrawAmount: ''
      }
    },
    methods: {
      withdraw() {
        // 提现逻辑
      }
    }
  }
</script>

<style scoped>
  .container {
    padding: 20px;
  }
</style>